xan.lol
forked from
atpota.to/flushes.app
The 1st decentralized social network for sharing when you're on the toilet. Post a "flush" today! Powered by the AT Protocol.
1.container {
2 max-width: 800px;
3}
4
5.header {
6 display: flex;
7 justify-content: space-between;
8 align-items: flex-start;
9 margin-bottom: 2rem;
10 flex-wrap: wrap;
11 gap: 1rem;
12}
13
14.headerContent {
15 flex: 1 1 300px;
16 min-width: 0;
17}
18
19.title {
20 font-size: 2.5rem;
21 margin-bottom: 0.25rem;
22 color: var(--primary-color);
23 word-wrap: break-word;
24 hyphens: auto;
25 line-height: 1.2;
26}
27
28.subtitle {
29 font-size: 1rem;
30 color: var(--timestamp-color);
31 margin: 0 0 0.5rem 0;
32 font-weight: normal;
33 word-wrap: break-word;
34}
35
36.description {
37 font-size: 1rem;
38 color: var(--text-color);
39 margin: 0;
40 line-height: 1.5;
41 word-wrap: break-word;
42 white-space: pre-wrap;
43 overflow-wrap: break-word;
44}
45
46.profileHeader {
47 margin-bottom: 2rem;
48 padding-bottom: 1rem;
49 border-bottom: 1px solid var(--tile-border);
50}
51
52.profileInfo {
53 display: flex;
54 flex-direction: column;
55 gap: 0.8rem;
56}
57
58.profileTitle {
59 font-size: 1.8rem;
60 margin: 0;
61 color: var(--title-color);
62 line-height: 1.2;
63}
64
65.profileHandle {
66 font-size: 1.1rem;
67 margin: -0.4rem 0 0 0;
68 color: var(--primary-color);
69 font-weight: 500;
70 line-height: 1.2;
71}
72
73.profileStats {
74 font-size: 1.1rem;
75 color: var(--text-color);
76 margin: 0;
77}
78
79.viewOnBluesky {
80 display: inline-block;
81 color: var(--primary-color);
82 text-decoration: none;
83 font-weight: 500;
84 margin-top: 0.5rem;
85 transition: all 0.2s;
86}
87
88.viewOnBluesky:hover {
89 text-decoration: underline;
90 /* Removed transform to prevent movement */
91}
92
93/* Stats section and chart */
94.statsSection {
95 background-color: var(--card-background);
96 border-radius: 8px;
97 padding: 1.5rem;
98 margin-bottom: 1.5rem;
99 border: 1px solid var(--tile-border);
100}
101
102.statsHeader {
103 font-size: 1.5rem;
104 font-weight: 500;
105 color: var(--title-color);
106}
107
108.statDetails {
109 font-size: 1.1rem;
110 color: var(--text-color);
111}
112
113.chartContainer {
114 height: 150px;
115 display: flex;
116 align-items: flex-end;
117 gap: 2px;
118 border-bottom: 1px solid var(--tile-border);
119 margin-top: 1rem;
120 padding-top: 1rem;
121 position: relative;
122}
123
124.chartBar {
125 background-color: var(--primary-color);
126 flex: 1;
127 min-width: 2px;
128 border-radius: 2px 2px 0 0;
129 transition: height 0.3s ease;
130}
131
132.chartAxis {
133 display: flex;
134 justify-content: space-between;
135 margin-top: 0.5rem;
136 color: var(--timestamp-color);
137 font-size: 0.8rem;
138}
139
140.chartLegend {
141 display: flex;
142 justify-content: space-between;
143 margin-top: 0.5rem;
144}
145
146.chartLegendItem {
147 font-size: 0.75rem;
148 color: var(--timestamp-color);
149}
150
151.shareStatsButton {
152 display: block;
153 background-color: var(--primary-color);
154 color: white;
155 border: none;
156 border-radius: 4px;
157 padding: 0.8rem 1.2rem;
158 font-size: 1rem;
159 font-weight: 500;
160 cursor: pointer;
161 margin-top: 1.5rem;
162 transition: all 0.2s;
163 padding-top: 1rem;
164}
165
166.shareStatsButton:hover {
167 background-color: var(--secondary-color);
168 /* Removed transform and box-shadow to prevent movement */
169}
170
171.noDataMessage {
172 color: var(--timestamp-color);
173 text-align: center;
174 padding: 2rem 0;
175 font-style: italic;
176}
177
178/* Emoji Statistics Section */
179.emojiStatsSection {
180 margin-top: 2rem;
181 padding-top: 1.5rem;
182 border-top: 1px solid var(--tile-border);
183}
184
185.emojiStatsHeader {
186 font-size: 1.1rem;
187 font-weight: 500;
188 margin: 0 0 1rem 0;
189 color: var(--title-color);
190}
191
192.emojiGrid {
193 display: grid;
194 grid-template-columns: repeat(4, 1fr);
195 gap: 0.75rem;
196}
197
198.emojiCard {
199 display: flex;
200 flex-direction: column;
201 align-items: center;
202 background-color: var(--input-background);
203 border-radius: 8px;
204 padding: 0.75rem 0.5rem;
205 border: 1px solid var(--tile-border);
206}
207
208.emojiDisplay {
209 font-size: 1.5rem;
210 margin-bottom: 0.5rem;
211}
212
213.emojiCount {
214 font-weight: bold;
215 color: var(--primary-color);
216 font-size: 0.9rem;
217}
218
219@media (max-width: 600px) {
220 .emojiGrid {
221 grid-template-columns: repeat(3, 1fr);
222 gap: 0.5rem;
223 }
224
225 .emojiDisplay {
226 font-size: 1.3rem;
227 }
228
229 .emojiCount {
230 font-size: 0.85rem;
231 }
232}
233
234.headerActions {
235 display: flex;
236 gap: 1rem;
237}
238
239@media (max-width: 600px) {
240 /* Header styles */
241 .header {
242 flex-direction: column;
243 align-items: flex-start;
244 }
245
246 .headerContent {
247 flex: 1 1 100%;
248 text-align: left;
249 }
250
251 .headerActions {
252 width: 100%;
253 justify-content: flex-start;
254 }
255
256 .title {
257 font-size: 2rem;
258 }
259
260 .profileHeader {
261 text-align: left;
262 }
263
264 .profileInfo {
265 align-items: flex-start;
266 }
267
268 .profileText {
269 margin-left: 0px;
270 }
271
272 /* Content alignment for feed items */
273 .contentLeft {
274 align-items: center;
275 display: block;
276 }
277}
278
279.backButton {
280 display: inline-block;
281 background-color: var(--primary-color);
282 color: white;
283 padding: 0.6rem 1.2rem;
284 border-radius: 4px;
285 font-size: 1rem;
286 font-weight: 500;
287 transition: all 0.2s ease;
288 text-decoration: none;
289}
290
291.backButton:hover {
292 background-color: var(--secondary-color);
293 /* Removed transform and box-shadow to prevent movement */
294}
295
296.error {
297 background-color: var(--error-background);
298 color: var(--error-color);
299 padding: 1rem;
300 border-radius: 4px;
301 margin-bottom: 1rem;
302}
303
304.loadingContainer {
305 display: flex;
306 flex-direction: column;
307 align-items: center;
308 justify-content: center;
309 padding: 2rem;
310 text-align: center;
311}
312
313.loader {
314 border: 4px solid var(--input-background);
315 border-top: 4px solid var(--primary-color);
316 border-radius: 50%;
317 width: 24px;
318 height: 24px;
319 animation: spin 1s linear infinite;
320 margin-bottom: 1rem;
321}
322
323.smallLoader {
324 border: 3px solid var(--input-background);
325 border-top: 3px solid var(--primary-color);
326 border-radius: 50%;
327 width: 18px;
328 height: 18px;
329 animation: spin 1s linear infinite;
330 margin-top: 0.5rem;
331 display: inline-block;
332}
333
334.profileLoading {
335 display: flex;
336 flex-direction: column;
337 align-items: flex-start;
338 gap: 0.5rem;
339}
340
341.smallError {
342 color: var(--timestamp-color);
343 font-size: 0.9rem;
344 font-style: italic;
345 margin-top: 0.3rem;
346}
347
348@keyframes spin {
349 0% { transform: rotate(0deg); }
350 100% { transform: rotate(360deg); }
351}
352
353.feedList {
354 display: flex;
355 flex-direction: column;
356 gap: 1rem;
357 margin-top: 1rem;
358}
359
360.feedItem {
361 background-color: var(--card-background);
362 border: 1px solid var(--tile-border);
363 border-radius: 8px;
364 padding: 1rem;
365 transition: transform 0.2s, box-shadow 0.2s;
366}
367
368@media (max-width: 600px) {
369 .feedItem {
370 padding: 0.75rem;
371 margin-bottom: 0.5rem;
372 border-radius: 6px;
373 }
374
375 .feedList {
376 gap: 0.5rem;
377 }
378
379 .feedItem:hover {
380 transform: none;
381 }
382
383 .content {
384 flex-direction: column;
385 gap: 0.25rem;
386 align-items: flex-start;
387 }
388
389 .contentLeft {
390 display: block;
391 width: 100%;
392 }
393
394 /* First line: emoji and username */
395 .emoji {
396 display: inline-block;
397 font-size: 1.3rem;
398 vertical-align: middle;
399 margin-right: 0.5rem;
400 }
401
402 .author {
403 display: inline-block;
404 vertical-align: middle;
405 white-space: nowrap;
406 overflow: hidden;
407 text-overflow: ellipsis;
408 max-width: 120px; /* Smaller on mobile */
409 }
410
411 /* Second line: status text */
412 .text {
413 display: block;
414 font-size: 0.95rem;
415 line-height: 1.3;
416 margin-top: 0.3rem;
417 margin-left: 0.5rem;
418 padding-bottom: 0.2rem;
419 }
420
421 /* Third line: timestamp */
422 .timestamp {
423 display: block;
424 width: 100%;
425 text-align: left;
426 font-size: 0.8rem;
427 color: #888;
428 padding-left: 0.5rem;
429 }
430}
431
432.content {
433 display: flex;
434 align-items: flex-start;
435 gap: 0.75rem;
436 justify-content: space-between;
437 width: 100%;
438 flex-wrap: wrap;
439}
440
441.contentLeft {
442 display: flex;
443 align-items: center;
444 gap: 0.75rem;
445 flex: 1;
446 min-width: 0;
447}
448
449.contentRight {
450 display: flex;
451 align-items: center;
452 gap: 0.75rem;
453}
454
455.editButton {
456 background: none;
457 border: 1px solid var(--border);
458 color: var(--foreground);
459 padding: 6px;
460 cursor: pointer;
461 display: flex;
462 align-items: center;
463 justify-content: center;
464 transition: all 0.2s;
465 width: 32px;
466 height: 32px;
467}
468
469.editButton svg {
470 width: 16px;
471 height: 16px;
472}
473
474.editButton:hover {
475 border-color: var(--primary-color);
476 color: var(--primary-color);
477 background: rgba(var(--primary-rgb), 0.05);
478}
479
480.actionError {
481 background: #fee;
482 border: 1px solid #fcc;
483 color: #c33;
484 padding: 12px;
485 margin-bottom: 16px;
486 font-size: 0.9rem;
487}
488
489.actionSuccess {
490 background: #efe;
491 border: 1px solid #cfc;
492 color: #363;
493 padding: 12px;
494 margin-bottom: 16px;
495 font-size: 0.9rem;
496}
497
498.userLine {
499 display: flex;
500 align-items: center;
501 gap: 0.75rem;
502}
503
504.emoji {
505 font-size: 1.5rem;
506 flex-shrink: 0;
507 line-height: 1;
508 display: flex;
509 align-items: center;
510}
511
512.author {
513 color: var(--primary-color);
514 font-weight: 600;
515 text-decoration: none;
516 max-width: 180px;
517 white-space: nowrap;
518 overflow: hidden;
519 text-overflow: ellipsis;
520 display: inline-block;
521}
522
523.text {
524 font-size: 1.1rem;
525 line-height: 1.4;
526 color: var(--text-color);
527 flex: 1;
528 min-width: 0;
529 word-wrap: break-word;
530 overflow-wrap: break-word;
531 hyphens: auto;
532}
533
534.timestamp {
535 font-size: 0.85rem;
536 color: var(--timestamp-color);
537 margin-left: auto;
538 white-space: nowrap;
539}
540
541@media (max-width: 600px) {
542 .content {
543 flex-direction: column;
544 gap: 0.25rem;
545 align-items: flex-start;
546 }
547
548 .contentLeft {
549 width: 100%;
550 flex-direction: row;
551 flex-wrap: nowrap;
552 gap: 0.5rem;
553 margin-bottom: 0;
554 }
555
556 .timestamp {
557 width: 100%;
558 text-align: left;
559 margin-top: 0;
560 padding-left: 0rem;
561 font-size: 0.8rem;
562 color: var(--timestamp-color);
563 }
564
565 .emoji {
566 font-size: 1.3rem;
567 display: inline;
568 }
569
570 .text {
571 font-size: 0.95rem;
572 line-height: 1.3;
573 }
574}
575
576.emptyState {
577 text-align: center;
578 padding: 2rem;
579 background-color: var(--background-color);
580 border-radius: 8px;
581 border: 1px dashed var(--tile-border);
582}
583
584/* Flushes Roll Up 2025 Section */
585.wrappedSection {
586 background-color: var(--card-background);
587 border-radius: 8px;
588 padding: 2rem;
589 margin-bottom: 1.5rem;
590 border: 1px solid var(--tile-border);
591}
592
593.wrappedHeader {
594 font-size: 1.5rem;
595 font-weight: 500;
596 color: var(--title-color);
597 text-align: left;
598}
599
600.wrappedSubtitle {
601 font-size: 1.1rem;
602 color: var(--text-color);
603 text-align: left;
604 margin: 0 0 1rem 0;
605}
606
607.wrappedGrid {
608 display: grid;
609 grid-template-columns: repeat(4, 1fr);
610 gap: 1rem;
611 margin-bottom: 1.5rem;
612}
613
614.wrappedCard {
615 background-color: var(--card-background);
616 border-radius: 8px;
617 padding: 1.25rem 1rem;
618 text-align: center;
619 border: 1px solid var(--tile-border);
620 transition: all 0.2s;
621 display: flex;
622 flex-direction: column;
623 align-items: center;
624 justify-content: center;
625 min-height: 140px;
626}
627
628.wrappedCard:hover {
629 border-color: var(--primary-color);
630}
631
632.wrappedValue {
633 font-size: 1.8rem;
634 font-weight: 700;
635 color: var(--primary-color);
636 margin-bottom: 0.5rem;
637 line-height: 1.2;
638 word-wrap: break-word;
639 text-align: center;
640}
641
642.wrappedEmoji {
643 font-size: 2rem;
644 margin-bottom: 0.5rem;
645 line-height: 1;
646}
647
648.wrappedLabel {
649 font-size: 0.9rem;
650 color: var(--text-color);
651 font-weight: 500;
652 line-height: 1.3;
653 text-align: center;
654}
655
656.shareWrappedButton {
657 display: block;
658 background-color: var(--primary-color);
659 color: white;
660 border: none;
661 border-radius: 4px;
662 padding: 0.8rem 1.2rem;
663 font-size: 1rem;
664 font-weight: 500;
665 cursor: pointer;
666 margin-top: 1.5rem;
667 transition: all 0.2s;
668 padding-top: 1rem;
669}
670
671.shareWrappedButton:hover {
672 background-color: var(--secondary-color);
673}
674
675@media (max-width: 768px) {
676 .wrappedGrid {
677 grid-template-columns: repeat(2, 1fr);
678 }
679
680 .wrappedHeader {
681 font-size: 1.5rem;
682 }
683
684 .wrappedValue {
685 font-size: 1.5rem;
686 }
687
688 .wrappedEmoji {
689 font-size: 2rem;
690 }
691}
692
693@media (max-width: 480px) {
694 .wrappedSection {
695 padding: 1.5rem;
696 }
697
698 .wrappedGrid {
699 grid-template-columns: 1fr;
700 gap: 0.75rem;
701 }
702
703 .wrappedCard {
704 padding: 1rem 0.75rem;
705 }
706}